import React, { Component } from 'react'
import ReactEcharts from "echarts-for-react";
import { Button, Form, Input, Message, MessageBox,Popover,Select,Table ,Tag,Checkbox} from 'element-react';

export default class DeviceTree extends Component {

    treeRefresh = ()=>{
        fetch("/device/devicestatusinfo/tree")
        .then(data=>data.json())
        .then(result=>{
            this.setState({data : result.list})
            this.option.series[0].data = result.list
            this.setOptiondata()
        })
    }

    componentDidMount(){
        this.treeRefresh()
    }

    setOptiondata = ()=> {
        this.echart_react.getEchartsInstance().setOption(this.option)
    }

    option = {
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
          },
          series: [
            {
              type: 'tree',
              symbolSize:15,
              data: [],
              left: '2%',
              right: '2%',
              top: '18%',
              bottom: '20%',
              symbol: 'emptyCircle',
              orient: 'vertical',
              expandAndCollapse: false ,
              label: {
                position: 'top',
                distance:15,
                rotate: 0,
                verticalAlign: 'middle',
                align: 'center',
                fontSize: 20
              },
              leaves: {
                label: {
                  position: 'top', 
                  rotate: 0,  
                  verticalAlign: 'middle',
                  align: 'center',
                  fontSize:15
                }
              },
              animationDurationUpdate: 750
            }
          ]
    }
    onChartClick = (params)=> {
        let newrecord = {
            name:"",
            parent:params.data.id,
            level:params.data.level*1+1,
            devicestatuscode:-1,
            role:0 ,
            tag : "gray",
            optionname:"",
            endcode:""
        }

        MessageBox.msgbox({
            // cancelButtonText:"删除节点",
            showCancelButton:true,
            showClose:true,
            message:(
                <Form>
                    <Form.Item label='流程名称'>
                        <Input onChange={e=>newrecord.name = e} placeholder="请填写名称">
                        </Input>
                    </Form.Item>
                    <Form.Item label='选择状态审批人'>
                        <Select onChange={e=>newrecord.role = e} placeholder="请选择审批人 , 未选则默认保持无人审批请注意">
                                <Select.Option value={0} label="无需审批"/>
                                <Select.Option value={1} label="教师"/>
                                <Select.Option value={2} label="设备审批人"/>
                                <Select.Option value={3} label="仓库管理员"/>
                                <Select.Option value={4} label="管理员"/>
                        </Select>
                    </Form.Item>
                    <Form.Item label="设备状态选择">
                    <Select onChange={e=>newrecord.devicestatuscode = e} placeholder="请选择状态 , 未选则默认保持当前设备状态请注意">
                            <Select.Option value={0} label="在库"/>
                            <Select.Option value={2} label="出借"/>
                            <Select.Option value={1} label="维修"/>
                            <Select.Option value={3} label="报废"/>
                            <Select.Option value={-1} label="维持状态"/>
                    </Select>
                    </Form.Item>
                    <Form.Item label='选择标签样式'>
                        <Select onChange={e=>newrecord.tag = e} placeholder="标签样式选择">
                                <Select.Option key={1} value={"gray"} label="灰色">
                                    <Tag  type = "gray">样式一</Tag>
                                </Select.Option>
                                <Select.Option key={2} value={"success"} label="绿色">
                                    <Tag  type = "success">样式二</Tag>
                                </Select.Option>
                                <Select.Option key={3} value={"warning"} label="黄色">
                                    <Tag  type = "warning">样式三</Tag>
                                </Select.Option>
                                <Select.Option key={4} value={"danger"} label="红色">
                                    <Tag  type = "danger">样式四</Tag>
                                </Select.Option>
                                <Select.Option key={5} value={"primary"} label="蓝色">
                                    <Tag  type = "primary">样式五</Tag>
                                </Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item >
                        <Checkbox checked={false} onChange={e=>newrecord.endcode = e ? 1 : 0}>终止流程</Checkbox>
                    </Form.Item>
                    <Form.Item label='选项名称'>
                        <Input onChange={e=>newrecord.optionname = e} placeholder="填写选择别名"></Input>
                    </Form.Item>
                    <Form.Item label='流程删除'>
                        <Button onClick={()=>{
                            MessageBox.confirm("确定删除该流程？","警告",{
                                type:"waring"
                            }).then(()=>{
                                fetch("/device/devicestatusinfo/delete" , {
                                    method:"POST",
                                    headers:{
                                        "Content-Type": "application/json",
                                    },
                                    body:JSON.stringify([params.data.id])
                                }).then(data=>data.json())
                                .then(result=>{
                                    this.treeRefresh()
                                    Message({
                                        type:result.msg ,
                                        message:"删除"
                                    })
                                })
                            }).catch(()=>{
            
                            })
                        }}>
                            删除当前流程
                        </Button>
                    </Form.Item>
                    <Form.Item label='添加介入者'>
                        <Button onClick={()=>{
                            let newrecord = {
                                name : "" ,
                                role : 0 , 
                                statuscode: -1 
                            }
                            MessageBox.msgbox({
                                message:(
                                    <Form>
                                        <Form.Item label='操作名称'>
                                            <Input onChange={(e)=>{newrecord.name  =e }}></Input>
                                        </Form.Item>
                                        <Form.Item label='权限'>
                                            <Input type='number' onChange={(e)=>{newrecord.role  =e }}></Input>
                                        </Form.Item>
                                        <Form.Item label='流程走向'>
                                            <Input type='number' onChange={(e)=>{newrecord.statuscode  =e }}></Input>
                                        </Form.Item>
                                    </Form>
                                ),
                                showCancelButton:true
                            }).then(action=>{
                                if(action==="confirm")  {
                                    fetch("/device/devicestatusinvo/save" , {
                                        method:"POST",
                                        headers:{
                                            "Content-Type": "application/json",
                                        },
                                        body:JSON.stringify(newrecord)
                                    }).then(data=>data.json())
                                    .then(result=>{
                                        Message({
                                            type:result.msg ,
                                            message:"添加"
                                        })
                                    })
                                }
                            })
                        }}>
                            添加
                        </Button>
                    </Form.Item>
                </Form>
            )
        }).then(action=>{
            if(action==="confirm") {
                fetch("/device/devicestatusinfo/save" , {
                    method:"POST",
                    headers:{
                      "Content-Type": "application/json",
                    },
                    body:JSON.stringify(newrecord)
                }).then(data=>data.json())
                .then(result=>{
                    this.treeRefresh()
                    Message({
                        type:result.msg ,
                        message:"添加"
                    })
                })
            }
        })
        console.log(params)
    }
    nodeClick = {
        'click': this.onChartClick,
    }

    addRoot = () => {
        let newrecord = {
            name:"",
            parent:0,
            level:0,
            devicestatuscode:-1,
            role:0,
            tag:"gray"
        }
        MessageBox.msgbox({
            showCancelButton:true,
            message:(
                <Form>
                    <Form.Item label='选择设备起始状态'>
                        <Select onChange={e=>newrecord.devicestatuscode = e} placeholder="请选择状态 , 未选则默认保持当前设备状态请注意">
                            <Select.Option value={0} label="在库"/>
                            <Select.Option value={1} label="出借"/>
                            <Select.Option value={2} label="维修"/>
                            <Select.Option value={3} label="报废"/>
                            <Select.Option value={-1} label="维持状态"/>
                        </Select>
                    </Form.Item>
                    <Form.Item label='请选择状态审批人'>
                        <Select onChange={e=>newrecord.role = e} placeholder="请选择审批人 , 未选则默认保持无人审批请注意">
                                <Select.Option value={0} label="无需审批"/>
                                <Select.Option value={1} label="教师"/>
                                <Select.Option value={2} label="设备审批人"/>
                                <Select.Option value={3} label="仓库管理员"/>
                                <Select.Option value={4} label="管理员"/>
                        </Select>
                    </Form.Item>
                    <Form.Item label='选择标签样式'>
                        <Select onChange={e=>newrecord.tag = e} placeholder="标签样式选择">
                                <Select.Option key={1} value={"gray"} label="灰色">
                                    <Tag  type = "gray">样式一</Tag>
                                </Select.Option>
                                <Select.Option key={2} value={"success"} label="绿色">
                                    <Tag  type = "success">样式二</Tag>
                                </Select.Option>
                                <Select.Option key={3} value={"warning"} label="黄色">
                                    <Tag  type = "warning">样式三</Tag>
                                </Select.Option>
                                <Select.Option key={4} value={"danger"} label="红色">
                                    <Tag  type = "danger">样式四</Tag>
                                </Select.Option>
                                <Select.Option key={5} value={"primary"} label="蓝色">
                                    <Tag  type = "primary">样式五</Tag>
                                </Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label='添加根流程名称'>
                        <Input onChange={e=>newrecord.name = e} placeholder="请填写名称">
                        </Input>
                    </Form.Item>
                </Form>
            )
        }).then(action=>{
            if(action==="confirm") {
                fetch("/device/devicestatusinfo/save" , {
                    method:"POST",
                    headers:{
                      "Content-Type": "application/json",
                    },
                    body:JSON.stringify(newrecord)
                }).then(data=>data.json())
                .then(result=>{
                    this.treeRefresh()
                    Message({
                        type:result.msg ,
                        message:"添加"
                    })
                })
            }
        })
    }

  render() {
    return (
        <div  style={{height: '100%', width: '100%'}}>
            <Button onClick={this.addRoot}>添加一级审批</Button>
            <div  style={{height: '80%', width: '100%',overFlow: "auto"}}>
                <ReactEcharts
                style={{height: '100%', width: '100%'}}
                ref={(e)=>{this.echart_react = e}}
                option = {this.option}
                onEvents={{"click":this.onChartClick}}
                opts = {{
                    renderer : "svg"
                }}
                />
            </div>
        </div>
    )
  }
}
